﻿@model Vizzio.Models.IngresoDeProducto

@{
    ViewBag.Title = "Editar";
}

<h2>Editar Importacion</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Importacion</h4>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.ImportacionID)


        <div class="control-group form-group">
            @Html.LabelFor(model => model.CodigoDeImportacion, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CodigoDeImportacion, new { @class = "form-control", required = "", data_validation_required_message = "Campo requerido", maxlength = "30", data_validation_maxlength_message = "Muy largo: Ingrese 30 o menos caracteres", minlength = "1", data_validation_minlength_message = "Muy corto: Ingrese al menos 1 caracter", data_validation_regex_regex = "[A-ZñÑa-z0-9_\\-\\.,#\\/ ]+", data_validation_regex_message = "Solo caracteres Alfanumericos incluido [-_.,_/#]" })
                <p class="help-block">1 a 30 Caracteres Alfanumericos</p>
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Descripcion, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Descripcion, new { @class = "form-control", maxlength = "500", data_validation_maxlength_message = "Muy largo: Ingrese 500 o menos caracteres" })
                <p class="help-block">Maximo 500 Caracteres</p>
            </div>
        </div>

        @*<div class="control-group form-group">
            @Html.LabelFor(model => model.Estado, new { @class = "control-label col-md-2 control-label" })
            <div class="col-md-10 controls">
                @Html.DropDownListFor(model => model.Estado, new[] { new SelectListItem { Value = "EnTransito", Text = "En Transito", Selected = true }, new SelectListItem { Value = "Recepcionado", Text = "Recepcionado" } })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.Fecha, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Fecha)
                @Html.ValidationMessageFor(model => model.Fecha)
            </div>
        </div>
        <hr />
        <h4>Productos Importados</h4>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Cantidad</th>
                            <th>Precio</th>
                            <th>Numero de Lote</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="productos">
                        @for (var prodIndex = 0; prodIndex < Model.ProductoImportados.Count(); prodIndex++)
                        {
                             <tr class='nuevo_producto'>
                           <td><div class='control-group'><div class='controls'>ss</div></div></td>
                            <td><div class='control-group'><div class='controls'><input type='number' class='form-control cantidad' name='" + name + ".Cantidad' data-validation-number-message='Solo numeros enteros' required data-validation-required-message='Campo requerido' min='1' data-validation-min-message='Debe ser mayor a cero' maxlength='6' data-validation-maxlength-message='Muy grande. Maximo 6 digitos' data-validation-regex-regex='[0-9]+' data-validation-regex-message='Debe ingresar un entero positivo' placeholder='Cantidad' /><p class='help-block'></p></div></div></td>
                            <td><div class='control-group'><div class='controls'><input type='text' class='form-control precio' name='" + name + ".PrecioCompra' required data-validation-required-message='Campo requerido' min='1' data-validation-min-message='Debe ser mayor a cero' maxlength='8' data-validation-maxlength-message='Muy grande. Maximo 8 caracteres' data-validation-regex-regex='([0-9]+|[0-9]+,[0-9]+)' data-validation-regex-message='Solo valores decimales. Separador decimal( , )' placeholder='Precio de Compra' /></div></div></td>
                            <td><div class='control-group'><div class='controls'><input type='text' class='hidden' name='" + name + ".Eliminado' value='0' />" + "<input type='text' class='form-control noLote' name='" + name + ".NoLote' data-validation-number-message='Solo numeros enteros' required data-validation-required-message='Campo requerido' maxlength='20' data-validation-maxlength-message='Muy grande. Maximo 20 digitos' /></div></div></td>
                            <td><a href='#' class='delete_producto' onclick='delete_producto(this)'><img class='img-circle' width='40' src='/Content/Images/minus.png' title='Quitar Producto' /></a></td>
                        </tr>
                        }
                        
                    </tbody>
                </table>
                <div class="col-md-12">
                    <a href="#" class="add_producto">
                        <img class="img-circle" width="60" src="/Content/Images/plus.png" title="Agregar Producto" />
                    </a>
                </div>
            </div>
        </div>

        <hr />
        <div class="form-group row">
            <div class="col-md-offset-2 col-md-1">
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-ok"></span> Registrar
                </button>
            </div>
            <div class="col-md-offset-1 col-md-1">
                <a href="@Url.Action("Index", "Importacion")" class="btn btn-primary">
                    <span class="glyphicon glyphicon-remove"></span> Cancelar
                </a>
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Cancelar", "Index", null, new { @class = "btn btn-success" })
</div>

@section Scripts {
<script>
    $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); });
</script>

<script type="text/javascript">
    var listaDeProductos;
    contador_productos = 0;
    $(document).ready(function () {
        //Recuperamos todos los productos de la base de datos
        $.ajax({
            type: "POST",

            // lugar donde se aloja nuestro web service
            url: "http://localhost:6490/Service/WebServiceGetProductos.asmx/ObtenerProductos",
            dataType: "json",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                //alert("paso algo");

                listaDeProductos = JSON.parse(data.d);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + " Error: " + XMLHttpRequest.statusText);
            }
        });
    });

    //---------------------------------------------------Activa la validacion de los campos (Cargados estaticamente) ----------------------------------------//
    $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); });

    //-------------------------- Funcion que agrega un nuevo producto cuando se hace clic en el boton + ------------------------------//
    $("a.add_producto").click(function () {
        //var contador_productos = parseInt($(".contador_productos").val());
        name = "productos[" + contador_productos + "]";

        var selectList = "<select name='" + name + ".ProductoID' class='combobox" + contador_productos + " productoSeleccionado' required><option></option>";
        $.each(listaDeProductos, function (index, producto) {
            selectList += "<option value='" + producto.ProductoID + "'>" + producto.Nombre + "</option>";
            //alert("key: " + producto.ProductoID + " vlaue: " + producto.Nombre);
        });
        selectList += "</select>";

        //$(jQuery.parseHTML(selectList)).combobox();
        //$('#my-container').html(selectList);
        var nuevo_producto = "<tr class='nuevo_producto'>"
                                + "<td><div class='control-group'><div class='controls'>" + selectList + "</div></div></td>"
                                + "<td><div class='control-group'><div class='controls'><input type='number' class='form-control cantidad' name='" + name + ".Cantidad' data-validation-number-message='Solo numeros enteros' required data-validation-required-message='Campo requerido' min='1' data-validation-min-message='Debe ser mayor a cero' maxlength='6' data-validation-maxlength-message='Muy grande. Maximo 6 digitos' data-validation-regex-regex='[0-9]+' data-validation-regex-message='Debe ingresar un entero positivo' placeholder='Cantidad'/><p class='help-block'></p></div></div></td>"
                                + "<td><div class='control-group'><div class='controls'><input type='text' class='form-control precio' name='" + name + ".PrecioCompra' required data-validation-required-message='Campo requerido' min='1' data-validation-min-message='Debe ser mayor a cero' maxlength='8' data-validation-maxlength-message='Muy grande. Maximo 8 caracteres' data-validation-regex-regex='([0-9]+|[0-9]+,[0-9]+)' data-validation-regex-message='Solo valores decimales. Separador decimal( , )' placeholder='Precio de Compra'/></div></div></td>"
                                + "<td><div class='control-group'><div class='controls'><input type='text' class='hidden' name='" + name + ".Eliminado' value='0'/>" + "<input type='text' class='form-control noLote' name='" + name + ".NoLote' data-validation-number-message='Solo numeros enteros' required data-validation-required-message='Campo requerido' maxlength='20' data-validation-maxlength-message='Muy grande. Maximo 20 digitos'/></div></div></td>"
                                + "<td><a href='#' class='delete_producto' onclick='delete_producto(this)'><img class='img-circle' width='40' src='/Content/Images/minus.png' title='Quitar Producto' /></a></td>"
                                + "</tr>";
        //Agregamos nueva fila a la tabla de productos
        $(this).closest(".row").find(".productos").append(nuevo_producto);
        //Activamos el combobox para que sea un autocomplete selectbox
        $(("select.combobox" + contador_productos)).combobox();
        //Incrementamos el index de los productos que seran enviados en el metodo post
        contador_productos = contador_productos + 1;
        //Activamos la validacion para los inputs agregados en tiempo de ejecucion
        $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); });
    });


    //---------------------Funcion que elimina(Oculta y cambia el estado) un producto de la lista de productos importados --------------------------//
    function delete_producto(elemento) {
        var fila = $(elemento).closest("tr.nuevo_producto");
        //Marcamos el producto con -1 para que no sea guardado en la base de datos
        fila.find(".hidden").attr('value', -1);
        //Eliminamos los campos que debian validarse
        fila.find(".productoSeleccionado").remove();
        fila.find(".cantidad").remove();
        fila.find(".precio").remove();
        fila.find(".noLote").remove();

        //Ocultamos el resto de los campos.
        fila.hide();
    };



</script>


@Scripts.Render("~/bundles/jqueryval")
}
